<script lang="ts" setup>
import { ref, h } from 'vue';
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { Popover,Avatar,Image,Spin } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLogApi,getSceneApi } from '#/api/user/points';
import { getListApi as getUserListApi } from '#/api/user/user';
import { useDebounceFn } from '@vueuse/core';

const fetching = ref(false);
const keyword = ref('');
const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  schema: [
    {
      // 字段名
      fieldName: 'user_id',
      // 界面显示的label
      label: '用户',
      defaultValue: 0,
      component: 'ApiSelect',
      // 对应组件的参数
      componentProps: () => {
        return {
          api: getUserListApi,
          beforeFetch: () => {
            fetching.value = true;
          },
          afterFetch: (data: any) => {
            fetching.value = false;
            data.items.unshift({
              user_id: 0,
              nick_name: '全部',
            });
            return data.items.map((item: any) => ({ label: item.nick_name, value: item.user_id }));
          },
          // 禁止本地过滤
          filterOption: false,
          // 如果正在获取数据，使用插槽显示一个loading
          notFoundContent: fetching.value ? undefined : null,
          // 搜索词变化时记录下来， 使用useDebounceFn防抖。
          onSearch: useDebounceFn((value: string) => {
            keyword.value = value;
          }, 300),
          // 远程搜索参数。当搜索词变化时，params也会更新
          params: {
            search: keyword.value || '',
          },
          showSearch: true,
          class: 'w-[100%]',
        };
      },
      renderComponentContent: () => {
        return {
          notFoundContent: fetching.value ? h(Spin) : undefined,
        };
      },
    },
    {
      component: 'ApiSelect',
      componentProps: {
        // 菜单接口转options格式
        afterFetch: (data: { name: string; value: number }[]) => {
          return [{ name: '全部', value: 0 },...data].map((item: any) => ({
            label: item.name,
            value: item.value,
          }));
        },
        // 菜单接口
        api: getSceneApi,
      },
      fieldName: 'scene',
      label: '变动场景',
      defaultValue: 0,
    },
    {
      component: 'RangePicker',
      fieldName: 'betweenTime',
      label: '变动时间',
      defaultValue: '',
      componentProps: {
        format: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
      },
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: false,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: true,
};

interface RowType {
  log_id: number;
  user_id: number;
  user: { nick_name: string; user_id: number; mobile: string; avatar: Array<{ id: number, url: string }> };
  scene: number;
  scene_name: string;
  value: number;
  new_value: number;
  describe: string;
  remark: string;
  create_time: string;
}

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    { field: 'log_id', title: 'ID', minWidth:'auto' },
    { field: 'user', slots: { default: 'user' }, title: '用户信息', minWidth:'auto' },
    { field: 'value', title: '变动数量', minWidth:'auto' },
    { field: 'new_value', title: '变动后积分', minWidth:'auto' },
    { field: 'scene_name', title: '变动场景', minWidth:'auto' },
    { field: 'describe', title: '描述/说明', minWidth:'auto' },
    { field: 'remark', title: '管理员备注', minWidth:'auto' },
    { field: 'create_time', title: '变动时间', minWidth:'auto' },
  ],
  showOverflow: false,
  exportConfig: {},
  keepSource: true,
  // border: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await getLogApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            ...formValues
        });
      },
    },
    sort: true,
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: { code: 'query' },
    zoom: true,
  },
  rowConfig: {
    keyField: 'log_id',//主键的字段名
  },
  cellConfig: {
    height: 50,
  },
};

const [Grid] = useVbenVxeGrid({ formOptions,gridOptions });

</script>

<template>
  <Page>
    <Grid table-title="变更记录">
      <template #user="{ row }">
        <div class="flex justify-center items-center">
          <div class="flex items-center">
            <Popover>
              <template #content>
                <Image :width="90" :src="item.url" v-for="(item,index) in row.user.avatar" :key="index" />
              </template>
              <Avatar :size="46" :src="item.url" v-for="(item,index) in row.user.avatar" :key="index"></Avatar>
            </Popover>
            <div class="ml-1 text-left text-sm text-black/75">
              <p>{{ row.user.nick_name }}</p>
              <p>{{ row.user.mobile }}</p>
            </div>
          </div>
        </div>
      </template>
    </Grid>
  </Page>
</template>
